<template>
  <div>
    <TopFilter ref="formpanel" :list="formList" :cols="3" :rows="2" labelWidth="100" :collapse="false" :isSubmitBtn="false"></TopFilter>
    <!-- @formChange="formchangeFun" -->

    <FilterTable
      ref="table"
      :columns="columns"
      :isColumnFilter="false"
      columnsRef="partPartOtherPartCirculateHandleReturnInIndex"
      :isToperInfo="false"
      :params="fetchParams"
      :datakey="'rows'"
      height="200"
      :onSyncTableData="changetablelist"
      :onRowSelectChange="columns => (this.columns = columns)"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <!-- :fetchapi="fetchApi" -->
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addHandle">新增</el-button>
      </template>
    </FilterTable>
    <BaseDialog :visible.sync="lastOrderNoVisible" title="借还处理对应单处理" destroyOnClose width="800px" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <lastOrderNoList @close="closeRelated" />
    </BaseDialog>
    <BaseDialog :visible.sync="addPartVisible" title="选择配件" destroyOnClose width="900px" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <addPart @close="closePartDialog" />
    </BaseDialog>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import lastOrderNoList from '../lastOrderNoList';
import addPart from '../addPart';
export default {
  components: {
    lastOrderNoList,
    addPart
  },
  mixins: [dictionary],
  data() {
    return {
      formList: this.createFrom(),
      columns: this.createTableColumns(),
      lastOrderNoVisible: false,
      addPartVisible: false,
      fetchParams: {}
    };
  },
  methods: {
    createFrom() {
      return [
        {
          type: 'INPUT',
          label: '单据编号',
          fieldName: 'documentNumber',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '对应单编号',
          fieldName: 'lastOrderNo',
          // filterable: true,
          // disabled: true,
          // itemList: []
          unitRender: props => {
            return <el-button icon="el-icon-search" onClick={() => this.selectRoNo(props)}></el-button>;
          }
        },
        {
          type: 'SELECT',
          label: '单据状态',
          fieldName: 'orderOtatus',
          disabled: true,
          itemList: this.createDictList('8072')
        },
        {
          type: 'SELECT',
          label: '仓库',
          fieldName: 'storage',
          disabled: true,
          itemList: this.createDictList('8072')
        },
        {
          type: 'DATE',
          label: '借还日期',
          disabled: true,
          fieldName: 'inOutDate'
        },
        {
          type: 'SELECT',
          label: '经手人',
          filterable: true,
          fieldName: 'experiencedPerson',
          itemList: []
          // unitRender: props => {
          //   return <el-button icon="el-icon-search" onClick={() => this.selectHandle(props)}></el-button>;
          // }
        },
        {
          type: 'SELECT',
          label: '操作员',
          fieldName: 'operator',
          filterable: true,
          disabled: true,
          itemList: []
          // unitRender: props => {
          //   return <el-button icon="el-icon-search" onClick={() => this.selectOperator(props)}></el-button>;
          // }
        },

        {
          type: 'INPUT',
          label: '对方单位名称',
          fieldName: 'companyName',
          disabled: true,
          rules: [{ required: true, message: '这是必填字段', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '备注',
          fieldName: 'remark'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          align: 'center',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          // width: 150,
          fixed: 'left',
          align: 'center',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>
                  编辑
                </el-button>
                <el-button size="mini" type="text" onClick={() => this.delLabour(props.row)}>
                  删除
                </el-button>
              </div>
            );
          }
        },
        {
          title: '配件代码',
          dataIndex: 'partNo',
          sorter: true,
          filter: true
        },
        {
          title: '配件名称',
          dataIndex: 'partName',
          sorter: true,
          filter: true
        },
        {
          title: '批号',
          dataIndex: 'batchNo',
          sorter: true,
          filter: true
          // render: props => {
          //   return <span>{this.createDictText(props.row.billTypeCode, '8210')}</span>;
          // }
        },
        {
          title: '保质期',
          dataIndex: 'qualityGuaranteePeriod',
          sorter: true,
          filter: true
        },
        {
          title: '保质期截至日期',
          dataIndex: 'qualityGuaranteePeriodTimestamp',
          sorter: true,
          filter: true
        },
        {
          title: '本次归还数量',
          dataIndex: 'number',
          sorter: true,
          filter: true
        },
        {
          title: '借出数量',
          dataIndex: 'number1',
          sorter: true,
          filter: true
        },
        {
          title: '已还数量',
          dataIndex: 'number2',
          sorter: true,
          filter: true
        },
        {
          title: '已开单归还数量',
          dataIndex: 'number3',
          sorter: true,
          filter: true
        },
        {
          title: '本次最多归还数量',
          dataIndex: 'number4',
          sorter: true,
          filter: true
        },
        {
          title: '库位编号',
          dataIndex: 'storageNo',
          width: 150,
          sorter: true,
          filter: true
        },
        {
          title: '库区代码',
          dataIndex: 'reservoirCode',
          sorter: true,
          filter: true
        },
        {
          title: '计量单位',
          dataIndex: 'unit',
          sorter: true,
          filter: true
        },
        {
          title: '库区名称',
          dataIndex: 'reservoirName',
          sorter: true,
          filter: true
        }
      ];
    },
    selectRoNo() {
      this.lastOrderNoVisible = true;
    },
    addHandle() {
      this.addPartVisible = true;
    },
    closeRelated() {
      this.lastOrderNoVisible = false;
    },
    closePartDialog() {
      this.addPartVisible = false;
    },
    editHandle() {},
    delLabour() {},
    // selectHandle() {},
    // selectOperator() {},
    changetablelist() {}
  }
};
</script>
